const TodoFooter = ({ list, type, setType }) => {
  const types = ['all', 'active', 'completed']
  const count = list.filter((item) => item.done === false).length
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{count}</strong> item left
      </span>
      <ul className="filters">
        {types.map((item) => {
          return (
            <li key={item}>
              <a
                className={item === type ? 'selected' : ''}
                href="#/"
                onClick={() => setType(item)}
              >
                {item}
              </a>
            </li>
          )
        })}
      </ul>
      <button className="clear-completed">Clear completed</button>
    </footer>
  )
}

export default TodoFooter
